<template>
  <div class="app-container">
    <el-table stripe :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row style="width: 100%">
    	<el-table-column prop="toolName" label="产品名称" align="center"></el-table-column>
    	<el-table-column prop="toolFzbz" label="反转标注" align="center"></el-table-column>
    	<el-table-column prop="toolYxbz" label="延续标注" align="center"></el-table-column>
      	<el-table-column align="center" label="操作" width="150" class-name="small-padding fixed-width">
	        <template slot-scope="scope">
	          	<el-button style="width: auto" type="success" size="mini" @click="handleUpdate(scope.row)">参数修改</el-button>
	        </template>
      	</el-table-column>
    </el-table>
    <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible" :closeOnClickModal='false'>
	  	<el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="90px">
	        <el-form-item label="反转标注" prop="toolFzbz">
	        	<el-input v-model.number="temp.toolFzbz" placeholder="请输入数字" :maxlength='11'></el-input>
	        </el-form-item>
	        <el-form-item label="延续标注" prop="toolYxbz">
	        	<el-input v-model.number="temp.toolYxbz" placeholder="请输入数字" :maxlength='11'></el-input>
	        </el-form-item>
	  	</el-form>
	  	<div slot="footer" class="dialog-footer">
	        <el-button @click="dialogFormVisible = false">取消</el-button>
	        <el-button type="primary" @click="updateData">确定</el-button>
	  	</div>
    </el-dialog>
  </div>
</template>

<script>
  import { getTableData, updateParameter } from '@/api/toolManage'
  export default {
    name: 'parameterDict',
    data() {
      	return {
	        tableKey: 0,
	        list: null,
	        listLoading: true,
	        temp: {
	          toolFzbz: '',
	          toolYxbz: ''
	        },
	        dialogFormVisible: false,
	        dialogStatus: '',
	        rules: {
          	toolFzbz: [
	        		{ required: true, message: '请输入数字', trigger: 'blur'},
	      			{ type: 'number', message: '请输入数字', trigger: 'blur'}
          	],
						toolYxbz: [
	        		{ required: true, message: '请输入数字', trigger: 'blur'},
	      			{ type: 'number', message: '请输入数字', trigger: 'blur'}
          	]
	        }
      	}
    },
    created() {
      this.getList()
    },
    methods: {
	  	getList() {
	        this.listLoading = true
	        getTableData().then(response => {
	          this.listLoading = false
	          this.list = response.Data
	        })
	  	},
	  	handleUpdate(row) {
	      	this.temp = Object.assign({}, row)
//					Object.keys(this.temp).forEach(item => {
//						this.temp[item] = row[item]
//					})
	        this.dialogStatus = row.toolName
	        this.dialogFormVisible = true
	        this.$nextTick(() => {
	          this.$refs['dataForm'].clearValidate()
	        })
	  	},
  		updateData() {
        this.$refs['dataForm'].validate(valid => {
	      	if (valid) {
		      	updateParameter(this.temp).then(() => {
			      	this.getList()
			      	this.dialogFormVisible = false
			      	this.$notify({ title: '成功', message: '参数修改成功', type: 'success', duration: 3000 })
		      	})
	      	}
        })
  		}
    }
  }
</script>